<li class="{{ cardClass }}">
  <a href="javascript:" (click)="onClickCard()">
    <span class="ddp-images-svg">
         <component-metadata-svg [iconClass]="iconClass"></component-metadata-svg>
    </span>
    <div class="ddp-data-summary">
      <div class="ddp-data-name">{{ title }}</div>
      <div class="ddp-data-detail">{{ description }}</div>
      <div class="ddp-data-detail" *ngIf="description === '' || !description ">No Description</div>

      <div class="ddp-ui-popularity">
        <em class="ddp-icon-popularity"></em>
        <div class="ddp-bar">
          <span [style.width]="popularity + '%'"></span>
          <!-- popup -->
          <div class="ddp-box-layout4 ddp-popularity">
            <div class="ddp-data-title">
              What is data popularity?
            </div>
            <div class="ddp-data-det">
              The data popularity indicates how much the data is being
              used. The list below is a set of criteria for measuring
              popularity.
              <ul>
                <li>• How many dashboards are connected?
                </li><li>• how many times was it joined with other data? </li>
                <li>• how many columns were used on the chart shelves? </li>
              </ul>
            </div>

          </div>
          <!-- //popup -->
        </div>
        <span class="ddp-data-by">by <strong>{{ creator }}</strong></span>
      </div>
      <!-- tags -->
      <div class="ddp-list-tags ddp-clear">
        <span class="ddp-tags" *ngFor="let tag of tagList.slice(0, 3)">#{{ tag.name }}</span>
        <span class="ddp-tags-num" *ngIf="tagList.length > 3">+{{tagList.length - 3}}</span>
        <span class="ddp-tags" *ngIf="tagList.length === 0">#No Tag</span>

      </div>
      <!-- //tags -->
    </div>

  </a>
</li>
